<template>
  <div class="food">
    <div class='guding'>
      <div class="food-head">
        <router-link to='/'>
          <div class="left back-index"> < </div>
        </router-link>
        <h2 class='rt'> {{title}} </h2>
      </div>
      <aside class='filter'>
        <div class="filter-header">
          <a @click="change(0)" href="javascript:;" class="filter-nav">
            <span>{{itname}}</span>
            <svg viewBox="0 0 72 32"><path d="M36 32l36-32h-72z"></path></svg> 
          </a>
          <a @click="change(1)" href="javascript:" class="filter-nav">
            <span>{{sort}}</span>
            <svg viewBox="0 0 72 32"><path d="M36 32l36-32h-72z"></path></svg> 
          </a>
          <a @click="change(2)" href="javascript:" class="filter-nav filter-nav-more">
            <span>筛选</span>
            <svg viewBox="0 0 72 32"><path d="M36 32l36-32h-72z"></path></svg> 
          </a>
        </div>
        <section v-show="index == 0" class="filter-extend filter-category">
          <div class="filter-scroller">
            <ul class='scroll-ul' >
              <li @click='getinside(index), guanbi(index, log)' class='scroll-li' :key='index' v-for='(it, index) in shop.num' >
                <span>{{it.name}}</span>
                <span class="count">{{it.count}}</span>
              </li>
            </ul>
            <ul class='inside-ul' >
              <li @click='pullid(it.id, it.name), close()' class='inside-li' :key='num' v-for='(it, num) in shop.inside'  >
                <img :src="'https://fuss10.elemecdn.com/' + it.image_url.substr(0,1) + '/' + it.image_url.substr(1,2) + '/' + it.image_url.substr(3) + (it.image_url.substr(-3) === 'peg'? '.jpeg' : '.png' ) + '?imageMogr/format/webp/thumbnail/!80x80r/gravity/Center/crop/80x80/'" alt="">
                <span>{{it.name}}</span>
                <span class="count">{{it.count}}</span>
              </li>
            </ul>
          </div>
        </section>
        <section v-show="index == 1" class="filter-extend filter-sort">
          <ul class="sort-ul">
            <li class="sort-li" @click='close(), pullsort(0)' >
              <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#default"><svg viewBox="0 0 33 32" id="default" width="100%" height="100%"><path fill="#3b87c8" d="M13.374 29.064a.94.94 0 0 1-.941-.941V6.476l-7.285 6.899a.942.942 0 0 1-1.299-1.364l8.876-8.424a.94.94 0 0 1 1.59.681v23.855a.94.94 0 0 1-.941.941zM20.904 29.355h-.008a.94.94 0 0 1-.375-.078.943.943 0 0 1-.559-.86V3.944a.94.94 0 1 1 1.882 0v22.287l7.238-6.842a.94.94 0 0 1 1.289 1.366l-8.818 8.338a.943.943 0 0 1-.649.264z"></path></svg></use></svg>
              <span>智能排序</span>
            </li>
            <li class="sort-li" @click='close(), pullsort(5)' >
              <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#distance"><svg viewBox="0 0 32 32" id="distance" width="100%" height="100%"><path fill="#2a9bd3" d="M15.884 31.236l-.042.001a.888.888 0 0 1-.59-.224l-7.91-7.91a7.548 7.548 0 0 1-.498-.471 12.752 12.752 0 0 1-3.747-9.045C3.097 6.523 8.824.796 15.888.796s12.791 5.727 12.791 12.791c0 3.532-1.432 6.73-3.747 9.045-.196.196-.409.391-.613.578l-7.813 7.804a.886.886 0 0 1-.589.223l-.035-.001zm0-28.667C9.818 2.59 4.908 7.513 4.908 13.582c0 3.023 1.218 5.762 3.19 7.752l.461.435 7.316 7.316 7.2-7.2q.284-.249.551-.516a10.977 10.977 0 0 0 3.225-7.787c0-6.066-4.905-10.987-10.965-11.013z"></path><path fill="#2a9bd3" d="M15.884 18.524a5.707 5.707 0 0 1-4.07-1.732l-.001-.001a5.76 5.76 0 1 1 4.119 1.734h-.05zm-2.817-2.942a3.982 3.982 0 1 0 0-5.626c-.726.717-1.175 1.713-1.175 2.813s.449 2.096 1.175 2.813z"></path></svg></use></svg>
              <span>距离最近</span>
            </li>
            <li class="sort-li" @click='close(), pullsort(6)' >
              <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#hot"><svg viewBox="0 0 23 32" id="hot" width="100%" height="100%"><path fill="#f07373" d="M9.859 29.375c-3.489-.771-6.362-3.097-7.187-5.551-.882-2.623-1.029-6.873-.238-9.318l-1.727.037.001.002.001.004.004.01.011.029.038.091c.039.09.086.191.142.3.155.304.349.627.586.955a7.477 7.477 0 0 0 2.711 2.318c.583.153.583.153 1.087-.188.187-.263.187-.263.224-.39.028-.094.041-.176.05-.28.01-.109.016-.238.022-.47.063-2.219.162-3.38.562-4.943a10.05 10.05 0 0 1 .814-2.185c1.433-2.723 4.843-6.053 6.699-7.021l-1.325-.962c-.064.382-.127.992-.131 1.722-.008 1.252.169 2.393.616 3.329.261.547.525.968 1.132 1.862l.23.339c.86 1.281 1.161 1.986 1.069 2.653l-.009.125c.069.517.069.517.781.906.451-.026.451-.026.578-.104.144-.093.144-.093.19-.136.041-.037.079-.077.123-.125.068-.076.153-.178.245-.295.22-.279.458-.615.677-.963.648-1.028 1.045-1.988 1.037-2.845l-.914.009-.706.581c.295.358.809 1.075 1.33 1.936.826 1.363 1.492 2.791 1.898 4.209 1.1 3.845.3 9.288-2.245 11.75a9.652 9.652 0 0 1-1.659 1.29 10.232 10.232 0 0 1-3.471 1.332c-.794.151-1.385.191-2.064.191h-.009a2.75 2.75 0 0 1-.373-.03 6.007 6.007 0 0 1-.585-.115 7.765 7.765 0 0 1-.536-.15l-.578 1.735a9.182 9.182 0 0 0 1.445.341c.221.031.43.048.627.048h.009a12.546 12.546 0 0 0 2.407-.224 12.011 12.011 0 0 0 4.088-1.572c.699-.431 1.358-.94 1.971-1.533 3.098-2.998 4-9.132 2.731-13.567-.455-1.591-1.188-3.161-2.092-4.653-.569-.939-1.134-1.727-1.482-2.15l-1.645-1.998.024 2.588c.004.412-.281 1.1-.756 1.853a9.64 9.64 0 0 1-.569.809 4.528 4.528 0 0 1-.158.195c.028-.027.028-.027.16-.113.122-.075.122-.075.57-.101.71.388.71.388.778.902h-.914l.906.125c.174-1.262-.261-2.281-1.362-3.922l-.235-.347c-.554-.817-.787-1.189-.995-1.624-.306-.642-.444-1.53-.438-2.53a10.566 10.566 0 0 1 .107-1.431L14.44.304l-1.628.85c-2.18 1.138-5.862 4.733-7.471 7.791a11.873 11.873 0 0 0-.967 2.583 19.2 19.2 0 0 0-.511 3.147c-.036.423-.061.839-.079 1.273-.011.281-.019.531-.029.924-.005.191-.01.298-.015.354a.403.403 0 0 1 .019-.077c.027-.099.027-.099.203-.346.492-.332.492-.332 1.112-.157a5.745 5.745 0 0 1-2.54-2.496 3.456 3.456 0 0 1-.093-.197l-.018-.044-.002-.006v.001l.001.002v.002l-.915-2.473-.812 2.51c-.917 2.836-.757 7.485.245 10.463 1.042 3.099 4.442 5.852 8.526 6.754l.395-1.785z"></path></svg></use></svg>
              <span>销量最高</span>
            </li>
            <li class="sort-li" @click='close(), pullsort(1)' >
              <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#price"><svg viewBox="0 0 32 32" id="price" width="100%" height="100%"><path fill="#e6b61a" d="M16 32c8.837 0 16-7.163 16-16S24.837 0 16 0 0 7.163 0 16s7.163 16 16 16zm0-2C8.268 30 2 23.732 2 16S8.268 2 16 2s14 6.268 14 14-6.268 14-14 14z"></path><path fill="#e6b61a" d="M23.14 6.06l-5.12 8.65h4.48v1.54h-5.49v2.43h5.49v1.54h-5.49v5.1h-2.02v-5.1H9.53v-1.54h5.46v-2.43H9.53v-1.54h4.45L8.8 6.06h2.24l4.99 8.48 4.93-8.48h2.18z"></path></svg></use></svg>
              <span>起送价最低</span>
            </li>
            <li class="sort-li" @click='close(), pullsort(2)' >
              <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#speed"><svg viewBox="0 0 32 32" id="speed" width="100%" height="100%"><path fill="#37c7b7" d="M16 32c8.837 0 16-7.163 16-16S24.837 0 16 0 0 7.163 0 16s7.163 16 16 16zm0-2C8.268 30 2 23.732 2 16S8.268 2 16 2s14 6.268 14 14-6.268 14-14 14z"></path><path fill="#37c7b7" d="M15 7v11.002l5.678 4.882 1.304-1.517-5.33-4.583.348.758V6.999h-2z"></path></svg></use></svg>
              <span>配送速度最快</span>
            </li>
            <li class="sort-li" @click='close(), pullsort(3)' >
              <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#rating"><svg viewBox="0 0 33 32" id="rating" width="100%" height="100%"><path fill="#eba53b" d="M27.087 31.84L16.8 25.553 6.504 31.84l2.824-11.727-9.186-7.878 12.019-.941L16.801.16l4.631 11.134 12.019.941-9.158 7.849zM16.8 23.369l7.407 4.527-2.014-8.471 6.588-5.647-8.659-.696L16.8 5.063l-3.341 8.019-8.659.696 6.588 5.647-2.014 8.471z"></path></svg></use></svg>
              <span>评分最高</span>
            </li>
          </ul>
        </section>
        <section v-show="index == 2" class="filter-extend filter-more">
          <div class="filter-scroller">
            <dl class='more-dl'>
              <dt class='more-dt'>配送方式</dt>
              <dd :class='{ seclocted: mode }' class="more-dd" @click='pullmode(1)' >
                <svg class="fengniao"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#fengniao"><svg viewBox="0 0 32 32" id="fengniao" width="100%" height="100%"><path fill="#27a9e1" d="M5.953 2.793s-.117 1.801.857 3.56c.361.255 10.458 6.218 10.458 6.218L5.953 2.794z"></path><path fill="#b8e5fa" d="M9.604.889s-.333 1.404.069 3.147c.254.307 7.801 8.116 7.801 8.116L9.604.889z"></path><path fill="#0089cf" d="M29.282 14.601l-4.861-.361s-.133-.001-.147-.226h-.002a2.652 2.652 0 0 0-2.978-2.357h-.003l-.011.001-.12.019-.004.001c-.432.075-1.812.374-3.038 1.285 0 0-.167.121-.421.33L2.665 6.043s3.254 8.665 12.207 11.98c-1.6 2.849-7.407 13.48-7.407 13.48l2.446-1.306s.775-2.853 1.884-4.957c.609-.936 1.211-.992 1.498-1.141.291-.151 3.707-.765 6.431-4.339.897-1.166 1.244-2.666 1.723-4.261.28-.061 3.008-.651 3.789-.718 1.068-.092 4.045-.181 4.045-.181z"></path><path fill="#0089cf" d="M7.392 17.849c-1.567-1.368-2.199-3.219-2.035-5.217-.232-.288-.45-.572-.654-.851-.484 2.903.555 4.854 2.176 6.269 1.538 1.342 3.635 1.85 5.466 1.577-1.674.109-3.563-.565-4.953-1.778z"></path><path fill="#0089cf" d="M12.345 19.628h.002zm-7.642-7.846c.204.279.421.563.654.851-.164 1.998.468 3.849 2.035 5.217 1.292 1.128 3.016 1.79 4.597 1.79.12 0 .238-.004.356-.011a6.554 6.554 0 0 1-.975.071c-1.568 0-3.22-.54-4.49-1.648-1.621-1.415-2.66-3.366-2.176-6.269z"></path></svg></use></svg>
              <svg class="selected-icon"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#selected"><svg viewBox="0 0 38 32" id="selected" width="100%" height="100%"><path fill="#3190e8" d="M32.291 2.327c.582-.582 1.455-.582 2.036 0l2.036 2.036c.582.582.582 1.455 0 2.036L13.818 29.09c-.582.582-1.455.582-2.036 0L1.455 18.908c-.582-.582-.582-1.455 0-2.036l2.036-2.036c.582-.582 1.455-.582 2.036 0l7.273 7.273L32.291 2.327z"></path></svg></use></svg><!----><!---->
              <span>蜂鸟专送</span>
              </dd>
            </dl>
            <dl class='more-dl'>
              <dt class='more-dt'>商家属性 (可多选)</dt>
              <dd :class='{ seclocted: supp.indexOf(8)!=-1 }' class="more-dd" @click='pullsupp(8)' ><!---->
              <!-- <svg class="selected-icon">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#selected"></use></svg> -->
                <i style="color: rgb(63, 189, 230);">品</i><!---->
                <span>品牌商家</span>
              </dd>
              <dd :class='{ seclocted: supp.indexOf(7)!=-1 }' class="more-dd" @click='pullsupp(7)' ><!---->
              <!-- <svg class="selected-icon">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#selected"></use></svg> -->
                <i style="color: rgb(153, 153, 153);">保</i><!---->
                <span>外卖保</span>
              </dd>
              <dd :class='{ seclocted: supp.indexOf(5)!=-1 }' class="more-dd" @click='pullsupp(5)' ><!---->
              <!-- <svg class="selected-icon">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#selected"></use></svg> -->
                <i style="color: rgb(232, 132, 45);">新</i><!---->
                <span>新店</span>
              </dd>
              <dd :class='{ seclocted: supp.indexOf(4)!=-1 }' class="more-dd" @click='pullsupp(4)' ><!---->
              <!-- <svg class="selected-icon">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#selected"></use></svg> -->
                <i style="color: rgb(153, 153, 153);">票</i><!---->
                <span>开发票</span>
              </dd>
              <dd :class='{ seclocted: supp.indexOf(3)!=-1 }' class="more-dd" @click='pullsupp(3)' ><!---->
              <!-- <svg class="selected-icon">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#selected"></use></svg> -->
                <i style="color: rgb(255, 78, 0);">付</i><!---->
                <span>在线支付</span>
              </dd>
              <dd :class='{ seclocted: supp.indexOf(9)!=-1 }' class="more-dd" @click='pullsupp(9)' ><!---->
              <!-- <svg class="selected-icon">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#selected"></use></svg> -->
                <i style="color: rgb(87, 169, 255);">准</i><!---->
                <span>准时达</span>
              </dd>
            </dl>
          </div>
          <div class="filter-btn">
            <a href="javascript:" @click='clear()' >清空</a>
            <a href="javascript:" @click='putweb(), close()' ref='sure' >确定<!----></a>
          </div>
        </section>
        <section v-show='show' @click='close()' class="filter-modal"></section>
      </aside>
    </div>
    <div class="box-top">
        <Shoplist></Shoplist>
    </div>
  </div>
</template>

<script>
  import Shoplist from './ShopList'
  import axios from 'axios'
  import { mapState } from 'vuex'
  export default {
    name: 'food',
    data () {
      return {
        title: '...',
        index: 3,
        show: false,
        itname: '分类',
        log: '全部商家',
        sort: '排序',
        mode: '',
        supp: []
      }
    },
    methods: {
      pullid (id, name) {
        this.itname = name
        this.$store.commit('CHANGECATE', id)
        this.$store.commit('SHOPLIST')
      },
      pullsort (id) {
        this.$store.commit('CHANGESORT', id)
        this.$store.commit('SHOPLIST')
      },
      pullmode (id) {
        if (this.mode) {
          this.mode = ''
        } else {
          this.mode = id
        }
        // console.log(this.mode)
      },
      pullsupp (id) {
        var index = this.supp.indexOf(id)
        if (index === -1) {
          this.supp.push(id)
        } else {
          this.supp.splice(index, 1)
        }
        var length = this.supp.length
        if (length) {
          this.$refs.sure.innerHTML = '确定(' + length + ')'
        } else {
          this.$refs.sure.innerHTML = '确定'
        }
      },
      putweb () {
        var mode = this.mode
        var supp = this.supp
        this.$store.commit('CHANGEMODE', mode)
        this.$store.commit('CHANGESUPP', supp)
        this.$store.commit('SHOPLIST')
      },
      clear () {
        this.mode = ''
        this.supp = []
        this.$refs.sure.innerHTML = '确定'
      },
      close () {
        this.show = false
        this.index = 3
      },
      guanbi (index, log) {
        if (!index) {
          this.show = false
          this.index = 3
          this.itname = log
        }
      },
      change (num) {
        if (this.index === num){
          this.index = 3
          this.show = false
        } else {
          this.index = num
          this.show = true
        }
      },
      getinside (index) {
        // console.log(index)
        this.$store.commit('GETINSIDE', index)
      }
    },
    computed: {
      ...mapState(['shop'])
    },
    created () {
      this.title = this.$route.query.title
      var that = this
      axios.get('http://localhost:3000/shopnum').then(res => {
        that.$store.commit('SHOPNUM', res.data)
      })
    },
    components: { Shoplist }
  }
</script>

<style lang="scss" scoped>
  @import '../../static/hotcss/px2rem';
  .food{
    z-index: 999;
    .guding{
      position: fixed;
      top: 0;
      width: 100%;
      .food-head{
        height: px2rem(44);
        background-color: #2395ff;
        a{
          display: inline-block;
          .back-index{
            width: px2rem(44);
            height: px2rem(44);
            line-height: px2rem(44);
            text-align: center;
            font-size: px2rem(31);
            color: #fff;
          }
        }
        h2{
          width: 100%;
          line-height: px2rem(44);
          height: px2rem(44);
          margin-left: px2rem(-44);
          text-align: center;
          color: #fff;
        }
      }
      .filter{
        position: relative;
        border-bottom: 1px solid #ddd;
        height: px2rem(40);
        line-height: px2rem(40);
        z-index: 999;
        .filter-header{
          position: absolute;
          top: 0;
          bottom: 0;
          width: 100%;
          display: flex;
          z-index: 3;
          background-color: #fff;
          .filter-nav{
            flex: 1;
            text-align: center;
            color: #666;
            position: relative;
            svg{
              width: px2rem(9);
              height: px2rem(4);
              margin-bottom: px2rem(2);
              fill: #999;
              will-change: transform;
              -webkit-transition: all .3s;
              transition: all .3s;
            }
          }
        }
        .filter-extend{
          left: 0;
          right: 0;
          top: 100%;
          border-top: 1px solid #ddd;
          position: absolute;
          max-height: 1000%;
          background-color: #fff;
          transition: all .2s ease-in-out;
          overflow: auto;
          z-index: 63;
          .filter-scroller{
            display: flex;
            height: px2rem(395);
            .scroll-ul{
              background-color: #fafafa;
              flex: 2;
              overflow: auto;
              .scroll-li{
                position: relative;
                line-height: px2rem(45);
                padding: 0 px2rem(5) 0 px2rem(10);
                span{
                  font-size: px2rem(10);
                }
                .count{
                  position: absolute;
                  right: px2rem(10);
                  line-height: px2rem(14.5);
                  top: 50%;
                  margin-top: px2rem(-7);
                  border-radius: px2rem(9);
                  border: 1px solid #eee;
                  background-color: #fff;
                  padding: 0 px2rem(5);
                  font-size: px2rem(11);
                }
              }
            }
            .inside-ul{
              flex: 3;
              overflow: auto;
              margin-left: px2rem(15);
              padding-right: px2rem(5);
              .inside-li{
                position: relative;
                line-height: px2rem(46);
                img{
                  margin-right: px2rem(7.5);
                  width: px2rem(25);
                  height: px2rem(25);
                  vertical-align: middle;
                }
                span{
                  font-size: px2rem(10);
                }
                .count{
                  position: absolute;
                  right: px2rem(10);
                  line-height: px2rem(14.5);
                  top: 50%;
                  margin-top: px2rem(-7);
                  border-radius: px2rem(9);
                  border: 1px solid #eee;
                  background-color: #fff;
                  padding: 0 px2rem(5);
                  font-size: px2rem(11);
                }
              }
            }
          }
          .sort-ul{
            .sort-li{
              position: relative;
              padding-left: px2rem(15);
              line-height: px2rem(50);
              svg{
                width: px2rem(15);
                height: px2rem(15);
                margin-right: px2rem(10);
                vertical-align: middle;
              }
              span{
                font-size: px2rem(11);
              }
              &::after{
                position: absolute;
                content: "";
                bottom: 0;
                left: px2rem(40);
                right: 0;
                height: 1px;
                background-color: #ddd;
              }
            }
          }
        }
        .filter-modal{
          position: fixed;
          left: 0;
          right: 0;
          top: 0;
          bottom: 0;
          z-index: 1;
          background: rgba(0,0,0,.2);
          opacity: 1;
          transition: all .3s ease-in-out;
        }
        .filter-more{
          padding-bottom: px2rem(55);
          .filter-scroller{
            overflow: auto;
            height: 100%;
            line-height: normal;
            flex-direction: column;
            .more-dl{
              display: block;
              margin: px2rem(10) 0;
              padding: 0 px2rem(15);
              overflow: hidden;
              .more-dt{
                margin-bottom: px2rem(7.5);
                color: #666;
                font-size: px2rem(12);
              }
              .more-dd{
                box-sizing: content-box;
                margin: 0;
                float: left;
                width: 31%;
                margin-right: 2%;
                border: 1px solid #ddd;
                padding: px2rem(6.5) 0;
                height: px2rem(21);
                margin-bottom: px2rem(7.5);
                border-radius: px2rem(3);
                .fengniao{
                  display: inline-block;
                  margin: 0 px2rem(5) 0 px2rem(7.5);
                  width: px2rem(12.5);
                  height: px2rem(12.5);
                  vertical-align: middle;
                }
                .selected-icon{
                  display: none;
                  margin: 0 px2rem(5) 0 px2rem(7.5);
                  width: px2rem(12.5);
                  height: px2rem(12.5);
                  vertical-align: middle;
                }
                span{
                  vertical-align: middle;
                  font-size: px2rem(10);
                }
                i{
                  display: inline-block;
                  vertical-align: middle;
                  font-style: normal;
                  border-width: 1px;
                  margin: 0 px2rem(5) 0 px2rem(7.5);
                  border-style: solid;
                  width: px2rem(18);
                  line-height: px2rem(18);
                  text-align: center;
                  border-radius: px2rem(5);
                  font-size: .32rem;
                  box-sizing: border-box;
                }
                &:nth-of-type(3n){
                  margin-right: 0;
                }
              }
              .seclocted{
                color: #3190e8;
                background-color: #edf5ff;
              }
            }
          }
          .filter-btn{
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            border-top: 1px solid #eee;
            background-color: #fafafa;
            padding: 0 px2rem(5);
            height: px2rem(55);
            display: flex;
            align-items: center;
            a{
              font-size: px2rem(20);
              line-height: px2rem(40);
              border-radius: px2rem(5);
              text-align: center;
              text-decoration: none;
              flex: 1;
              &:first-child{
                background-color: #fff;
                border: 1px solid #ddd;
                margin-right: px2rem(10);
                color: #333;
              }
              &:last-child{
                color: #fff;
                background-color: #56d176;
                border: 1px solid #56d176;
              }
            }
          }
        }
      }
    }
    .box-top{
      padding-top: px2rem(84);
    }
  }
</style>